<div class="modal-dialog">
    <? $this->load->helper('url'); ?>
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Evaluation</h4>
            </div>
        <div class="modal-body">
            <ul class="nav nav-tabs nav-justified" id="myTab">
                <li class="active"><a onclick="document.getElementById('submitAnswers').style.display = 'none';" href="#understand" data-toggle="tab">Understanding</a></li>
                <li><a onclick="document.getElementById('submitAnswers').style.display = 'none';" href="#about" data-toggle="tab">Learn About Words</a></li>
                <li><a onclick="document.getElementById('submitAnswers').style.display = '';" href="#think" data-toggle="tab">Think About It</a></li>
            </ul>
            <form class="display" id="examForm" method="post" action="<?php echo base_url('answers/getExamDetails'); ?>">
               
                <input type="hidden" name="timerValue" id="timer">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="understand">
                        <?foreach ($questions['instructions']['content'] as $content){
                                if($content['type']== 'A'){?>
                                     <h5> <strong><? echo $content['description']?></strong></h5>
                                <?}
                            }?>
                        <?
                        $num_of_questions = 1;
                        $number = 1;
                        foreach ($questions as $item) {
                            if ($item['type'] == 'A') {
                                $secureid = substr(md5(rand()), 0, 7);
                                ?>
                                     
                                    <? echo $number . '. ' . $item['question']; ?>
                                <div class="col-md-offset-1">
                                    <? foreach ($item['choices'] as $choice) { ?>
                                        <input type = 'radio' name ='<? echo $secureid.$choice['answer_id']?>' value= '<? echo $choice['answer']?>'> <? echo $choice['answer']?></><br>
                                    
                                    <? }?>
                                </div><br>
                                <?
                                $number+=1;
                                $num_of_questions += 1;
                            }
                         }
                        ?>
                    </div>
                    
                    <div class="tab-pane fade" id="about">
                       <?foreach ($questions['instructions']['content'] as $content){
                                if($content['type']== 'B'){?>
                                     <h5> <strong><? echo $content['description']?></strong></h5>
                                <?}
                            }?>
                        <div class="input-group input-group-sm">
                            <?
                            $number = 1;
                            foreach ($questions as $item) {
                                if ($item['type'] === 'B') {
                                    ?>
                                    <? echo $number . '. ' . $item['question']; ?>
                            <? foreach ($item['choices'] as $choice) { ?>
                                    <input onkeydown="return alphaValidator(event);" type="text" class="form-control"  name='<? echo $secureid= substr(md5(rand()), 0, 7).$choice['answer_id']?>'/><br><br>
                            <?}?>
                                        <?
                                    $number+=1;
                                    $num_of_questions += 1;
                                }
                            }
                            ?>
                        </div>
                        <?foreach ($questions['instructions']['content'] as $content){
                                if($content['type']== 'C'){?>
                                     <h5> <strong><? echo $content['description']?></strong></h5>
                                <?}
                            }?>
                        <div class="input-group input-group-sm">
                            <?
                            foreach ($questions as $item) {
                                if ($item['type'] === 'C') {
                                    ?>
                                    <? echo $number . '. ' . $item['question']; ?>
                                    <? foreach ($item['choices'] as $choice) { ?>
                                    <input onkeydown="return alphaValidator(event);" type="text" class="form-control"  name='<? echo $secureid= substr(md5(rand()), 0, 7).$choice['answer_id']?>'/><br><br>
                                    <?}
                                    $number+=1;
                                    $num_of_questions += 1;
                                }
                            }
                            ?>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="think">
                       <?  $file =  'dynamic/'.$_SESSION['folder'].'/'.$_SESSION['book_number'].'.php';
                       include $file;
                       unset($_SESSION['folder'])?>
                    </div>
                </div>
                
                    
                <div class="modal-footer">
                    <button onclick="display();" class="btn btn-primary" id="submitAnswers" style="display: none">Submit</button>
                </div> 
                </form>
                    </div>
        </div>
    </div>

<script>
$( "#examForm" ).submit(function( event ) {
    var numOfQuestions = <? echo $num_of_questions - 1; ?>;
    var numOfAnswers =  $(this).serializeArray().length-1;
    var answers= $(this).serializeArray();
    var isEmpty = false;
    console.log(numOfQuestions);
    console.log( numOfAnswers);
    
     $.each(answers, function (i, item) {
         isEmpty = false;
         if(item.value == ''){
             isEmpty = true;
             return;
         }
        });
     
    if(numOfQuestions!=numOfAnswers || isEmpty==true ){
       event.preventDefault();
       $('#error').modal({ }).css({
       'padding-top': function () { 
           return '10' + '%';  
       }
        });
    }

});
</script>